<template>
  <div class="home">
    <Search />

    <van-tabs v-model="active">
      <van-tab title="推荐">
        <div class="nav">
          <div class="lbt">
            <van-swipe
              class="my-swipe"
              :autoplay="3000"
              indicator-color="white"
            >
              <van-swipe-item v-for="(item, index) in images1" :key="index">
                <img
                  class="auto-img"
                  :src="item.url"
                  alt=""
                  :v-lazy="item.url"
                />
              </van-swipe-item>
            </van-swipe>
          </div>
          <div class="dh">
            <div class="dbox" @click="goFilm()">
              <img class="auto-img gimg" src="../assets/t1.png" alt="" />
              <div class="titbox">电影/影院</div>
            </div>
            <div class="dbox" @click="goXiao()">
              <img class="auto-img gimg" src="../assets/t2.png" alt="" />
              <div class="titbox">小视频</div>
            </div>
            <div class="dbox" @click="goFang()">
              <img class="auto-img gimg" src="../assets/t3.png" alt="" />
              <div class="titbox">放映厅</div>
            </div>
            <div class="dbox" @click="goJingDian()">
              <img class="auto-img gimg" src="../assets/t4.png" alt="" />
              <div class="titbox">经典电影</div>
            </div>
          </div>

          <div class="dh1">
            <van-cell
              title="正在热映"
              is-link
              :value="val + chang + '部'"
              title-class="size"
              @click="goFilmHost(active)"
            />
            <div class="host">
              <div class="dbox" v-for="(item, index) in host" :key="index">
                <div class="imgbox" @click="goDetails(item.id,item.globalReleased)">
                  <div class="dimg">
                    <img
                      class="auto"
                      :src="item.img"
                      alt=""
                      v-lazy="item.img"
                    />
                  </div>
                  <div class="sum">{{ item.sc.toFixed(1) }}<span id="fen">分</span></div>
                  <div class="lei">
                    {{ item.version }}
                  </div>
                </div>
                <div class="dtitle one-text">{{ item.nm }}</div>
                <van-button
                  round
                  type="info"
                  :color="item.showStateButton.color"
                  size="small"
                  @click="goShop(item.id)"
                  >{{ item.showStateButton.content }}</van-button
                >
              </div>
            </div>
          </div>

          <div class="dh1">
            <div class="jtop">
              <van-cell
                title="待映推荐"
                is-link
                :value="val + chang1 + '部'"
                title-class="size"
                @click="goFilmDai(active)"
              />
              <div class="jijiang">即将上映</div>
            </div>

            <div class="host">
              <div class="dbox" v-for="(item, index) in coming" :key="index">
                <div class="imgbox" @click="goDetails(item.id, item.globalReleased)">
                  <div class="dimg">
                    <img
                      class="auto"
                      :src="item.img"
                      alt=""
                      v-lazy="item.img"
                    />
                  </div>
                  <div class="sum sum1">
                    {{ ni[index] }}<span id="fen">想看</span>
                  </div>
                </div>
                <div class="dtitle one-text">{{ item.nm }}</div>
                <div class="riqi">{{ item.comingTitle }}</div>
                <van-button @click="goShop(item.id)" round type="info" size="small" color="#3C9FE6"
                  >预售</van-button
                >
              </div>
            </div>
          </div>

          <div class="dh1">
            <van-cell
              title="最受好评"
              is-link
              :value="val + chang2 + '部'"
              title-class="size"
            />
            <div class="host">
              <div class="dbox" v-for="(item, index) in good" :key="index" @click="goDetails(item.movieId,false)">
                <div class="imgbox">
                  <div class="dimg">
                    <img class="auto" :src="item.poster" alt="" />
                  </div>
                  <div class="sum">
                    {{ item.score}}<span id="fen">分</span>
                  </div>
                </div>
                <div class="dtitle one-text">{{ item.name }}</div>
                <van-button round type="info" color="#07C160" size="small"
                  >查看</van-button
                >
              </div>
            </div>
          </div>
          <Water1 />
        </div>
      </van-tab>
      <van-tab title="预告片">
        <Water />
      </van-tab>
      <van-tab title="小视频">
        <Water2 />
      </van-tab>
      <van-tab title="放映厅">
        <Water3 />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Water1 from "../components/Water1.vue";
import Water from "../components/Water.vue";
import Water2 from "../components/Water2.vue";
import Search from "../components/Search.vue";
import Water3 from "../components/Water3.vue";
export default {
  name: "Home",
  components: {
    Water1,
    Water,
    Water2,
    Search,
    Water3,
  },
  data() {
    return {
      active: 0,
      type:0,
      val: "全部",
      //热门列表
      host: [],
      //待映列表
      coming: [],
      ni: [],
      chang: "",
      chang1: "",
      chang2: "",
      //好评列表
      good: [],
      images1: [
        {
          url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F019dc959c0e7b1a801212fb75a57c0.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652080767&t=d91352ecf62fa8e14cc6afecfa21d508",
        },
        {
          url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0142b855a32b576ac72539e36104f9.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652080767&t=437267479d9e93f9056401cab68a9709",
        },
        {
          url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01594b565ea7836ac7255d2e59ee1f.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652080767&t=9a9c32effb9afc6d44ae033a100ffdf3",
        },
      ],
      cardList: [],
    };
  },
  created() {
    this.getHost();
    this.getDai();
    this.getGood();
    this.params = this.$route.params;
    
    if (this.params.nm === undefined) {
      return;
    } else {
      // //获取本地存储的记录
      let localData = localStorage.getItem("data");
      

      if (!localData) {
        localData = [];
      } else {
        localData = JSON.parse(localData);
        
      }
      let addList = {
        id: this.params.id,
        nm: this.params.nm,
      };
      localData.push(addList);
      localStorage.setItem("data", JSON.stringify(localData));
    }
  },
  methods: {
    getHost() {
      this.axios({
        method: "get",
        url: "https://apis.netstart.cn/maoyan/index/movieOnInfoList",
      })
        .then((result) => {
          this.host = result.data.movieList;
          this.chang = this.host.length;
          
        })
        .catch((err) => {
          
        });
    },
    getDai() {
      this.axios({
        method: "get",
        url: "https://apis.netstart.cn/maoyan/index/comingList?ci=1&limit=12",
      })
        .then((result) => {
          this.coming = result.data.coming;
          
          this.chang1 = this.coming.length;
          result.data.coming.forEach((v) => {
            var str = "" + v.wish;
            var ni = "";
            for (var i = 0; i < str.length; i++) {
              var temp = str.charAt(str.length - 1 - i);
              if ((i + 1) % 4 == 0 && i != 0) {
                temp = "," + temp;
              }
              ni = temp + ni;
            }
            if (ni.length > 5) {
              ni = ni.substring(0, 1) + "万";
            } else if (ni.substring(0, 1) === ",") {
              ni = ni.substring(1, ni.length);
            }
            this.ni.push(ni);
          });
        })
        .catch((err) => {
          
        });
    },
    getGood() {
      this.axios({
        method: "get",
        url: "https://apis.netstart.cn/maoyan/index/topRatedMovies",
      })
        .then((result) => {
          
          this.good = result.data.movieList;
          this.chang2 = this.good.length;
        })
        .catch((err) => {
          
        });
    },
    goFang() {
      this.active=3;
    },
    goJingDian() {
      this.$router.push({ name: "Jingdian" });
    },
    goFilm() {
      this.$router.push({ name: "Film" });
    },
    goFilmHost() {
      this.$router.push({ name: "Film", params: { active: 0 } });
    },
    goFilmDai() {
      this.$router.push({ name: "Film", params: { active: 2 } });
    },
    goDetails(id, type) {
      this.$router.push({ name: "Details", params: { id, type } });
    },
    goShop(id){
      this.$router.push({ name: "Shop", params: { id } });
    },
    goXiao(){
      this.active=2;
    }
  },
};
</script>

<style lang="less" scoped>
.home {
  background-color: #f0f0f0;
  /deep/.size {
    font-size: 17px;
    font-weight: bold;
  }
  .auto {
    width: 85px;
    height: 139px;
    border-radius: 5px;
  }

  .nav {
    width: 100%;
    padding-bottom: 50px;
    .lbt {
      width: 96%;
      margin: 0 auto;
      border-radius: 10px;
      overflow: hidden;
      margin-top: 2px;
      .my-swipe .van-swipe-item {
        width: 100%;
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #39a9ed;
      }
    }

    .dh {
      display: flex;
      justify-content: space-between;
      width: 96%;
      padding: 20px 30px;
      box-sizing: border-box;
      color: #666;
      background-color: #fff;
      margin: 10px auto;
      border-radius: 10px;
      .dbox {
        width: 55px;
        height: 68px;
        .gimg{
            border-radius: 10px;
            overflow: hidden;
          }
        .titbox {
          width: 100%;
          text-align: center;
        }
      }
    }

    .dh1 {
      width: 96%;
      margin: 0 auto;
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 10px;
      /deep/.van-cell {
        padding: 20px 11px;
      }
      .jtop {
        width: 100%;
        position: relative;
        .jijiang {
          width: 80px;
          text-align: center;
          position: absolute;
          top: 20px;
          left: 85px;
          font-size: 17px;
          border-left: 2px solid #ddd;
          color: #666;
        }
      }
      .host {
        width: 100%;
        display: flex;
        box-sizing: border-box;
        overflow: scroll;
        background-color: #fff;
        .dbox {
          width: 85px;
          height: 100%;
          margin-left: 6px;
          box-sizing: border-box;
          
          .imgbox {
            width: 100%;
            position: relative;
            .dimg {
              width: 100%;
            }
            .sum {
              font-size: 13px;
              font-weight: bold;
              color: #faaf00;
              position: absolute;
              bottom: 3px;
              left: 3px;
            }
            .sum1 {
              color: #f3f3f3;
              font-weight: normal;
            }
            .lei {
              position: absolute;
              top: 3px;
              left: 3px;
              font-size: 12px;
              color: #fff;
              font-weight: bold;
            }
            #fen {
              font-size: 12px;
              font-weight: normal;
            }
          }
          .dtitle {
            width: 100%;
            font-size: 13px;
            margin: 5px 0;
            color: #666;
            text-align: center;
          }
          .riqi {
            width: 100%;
            font-size: 13px;
            margin: 5px 0;
            color: #999;
            text-align: center;
          }
          /deep/.van-button {
            width: 60px;
            height: 25px;
            margin-left: 10px;
            margin-bottom: 15px;
          }
        }
        /deep/.dbox:last-child {
          margin-right: 6px;
        }
      }
    }
  }
}
</style>